<template>
	<view class="container">
		<view class="title">
			<view class="icon">
				<image src="/static/icon_time.png" mode="widthFix" class="img" style="width: 40rpx;"></image>
				<view class="text">
					{{stateText[status]}}
				</view>
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="card goods_info">
			<view class="card_top">
				<view class="card_title">
					商品信息
				</view>
			</view>
			<view class="center">
				<view class="goods_img">
					<image :src="goodsInfo.image" mode="widthFix" class="img"></image>
				</view>
				<view class="goods_info_main">
					<view class="goods_info_name">
						{{goodsInfo.title}}
					</view>
					<view class="goods_info_number">
						数量：{{goodsInfo.number}}
					</view>
					<view class="goods_info_price">¥{{goodsInfo.price}}</view>
				</view>
			</view>
			<view class="goods_info_bottom">
				<view class="amount"> 共{{goodsInfo.number}}件商品 </view>
				<view class="paid">
					<text style="margin-right: 4rpx;">合计</text><text style="color: #FA2C1E;">¥{{goodsInfo.price}}</text>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="card other_info">
			<view class="card_top">
				<view class="card_title">
					订单信息
				</view>
			</view>
			<view class="card_content">
				<view class="cell">
					<view class="label"> 订单编号 </view>
					<view class="value"> {{orderInfo.order_no}} </view>
				</view>
				<view class="cell">
					<view class="label"> 下单时间 </view>
					<view class="value"> {{orderInfo.createtime_text}} </view>
				</view>
				<view class="cell">
					<view class="label"> 支付方式 </view>
					<view class="value"> {{orderInfo.shop_id}} </view>
				</view>
				<view class="cell remark" v-if="status == '1'">
					<view class="label"> 备注 </view>
					<view class="value">
						{{orderInfo.remarks}}
					</view>
				</view>
				<view class="cell" v-if="status == '2'">
					<view class="label"> 订单核销码 </view>
					<view class="value"> {{orderInfo.shop_id}} </view>
				</view>
				<view class="cell" v-if="status == '2'">
					<view class="label"> 核销门店 </view>
					<view class="value"> {{orderInfo.shop_id}} </view>
				</view>
			</view>
		</view>
		<!-- 支付信息 -->
		<view class="card pay_info" >
			<view class="card_content">
				<view class="cell">
					<view class="label"> 商品总额 </view>
					<view class="value"> {{orderInfo.order_price}} </view>
				</view>
				<view class="cell">
					<view class="label"> 运费 </view>
					<view class="value"> + ￥{{orderInfo.freight_price}} </view>
				</view>
				<view class="cell">
					<view class="label"> 优惠 </view>
					<view class="value"> - ￥{{orderInfo.discount_price}} </view>
				</view>
				<view class="cell">
					<view class="label"> 合计 </view>
					<view class="value"> ¥{{orderInfo.sum_price}} </view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom">
			<button type="default" class="btn" @click="getPay" v-if="status == 1">立即使用</button>
			<button open-type="share" type="default" class="btn btn_concel" :data-goods-name="goods_info.goods_name" :data-image-url="goods_info.goods_img" v-if="status == 1" >转赠</button>
		</view>
	</view>
</template>

<script>
	import {getUnservedGoodOrderInfo,payment,cancelOrder} from '../../../api/api.js'
	export default {
		data() {
			return {
				statusBarHeight:'',
				serviceId:'',
				id:'',
				status:'',
				stateText:{
					'1':'未服务',
					'2':'已服务',
				},
				navigationBarTitleText:{
					'1':'未服务',
					'2':'已服务',
				},
				 //订单全部信息
				orderInfo:{} ,
				// 商品信息
				goodsInfo:{}, 
			}
		},
		onLoad(options) {
			this.id = options.id
			this.serviceId = options.serviceId
			this.status = options.status
			uni.setNavigationBarTitle({
				title: this.navigationBarTitleText[this.status]
			})
			this.GetStatusBarHeight();
			this.getUnservedGoodOrderInfo()
		},
		// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			  console.log(res.target)
			  return {
			    title: res.target.dataset.goodsName,
			    path: '/pages/login/login?orderId=' + this.serviceId,
			    imageUrl: res.target.dataset.imageUrl,
			  }
			}
			return {
				
			}
		},
		methods:{
			//获取状态栏的高度
			GetStatusBarHeight() {
			    let that = this;
			       wx.getSystemInfo({
			        success: function (res) {
			            that.statusBarHeight = res.statusBarHeight;
			        },
			    });
			},
			getUnservedGoodOrderInfo(){
				getUnservedGoodOrderInfo({order_id:this.id}).then(res=>{
					let {order_info,goods_info} = res.data.data
					this.orderInfo = order_info || {}
					this.goodsInfo = goods_info || {}
				})
			},
			back(){
				uni.navigateBack()
			},
			// 取消订单
			cancelOrder(){
				let token = uni.getStorageSync("token")
				cancelOrder({id:this.orderInfo.id,token}).then(res=>{
					console.log(res)
					this.getUnservedGoodOrderInfo()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.container {
	min-height: 100vh;
	width: 100%;
	// background: linear-gradient(to bottom, #FF2F3A 0% ,  #FE4650 300rpx, #F8F8F8 300rpx, #F8F8F8 100%) ;
	background-color: #F8F8F8;
	background-image: url('/static/bg_service_detail.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	padding: 0 24rpx;
	padding-bottom: calc(108rpx + 24rpx + env(safe-area-inset-bottom));
}
.title {
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 34rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	padding-left: 20rpx;
	.icon {
		display: flex;
		align-items: center;
		.text {
			margin-left: 10rpx;
		}
	}
	.time {
		font-size: 24rpx;
		font-weight: 400;
	}
}

.card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 20rpx 30rpx;
	margin-top: 24rpx;
	.card_top {
		height: 82rpx;
		padding-bottom: 20rpx;
		margin-bottom: 10rpx;
		border-bottom: 2rpx solid #E7E7E7;
		display: flex;
		align-items: center;
		.card_title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #222222;
		}
		
	}
	.card_content {
		.cell {
			display: flex;
			// align-items: center;
			font-size: 26rpx;
			line-height: 36rpx;
			padding: 10rpx 0;
			.label {
				flex: 1;
				color: #333333;
			}
			.value {
				flex: 2;
				text-align: right;
				color: #222222;
			}
		}
	}
}

// 商品信息
.goods_info {
	font-family: PingFangSC-Regular, PingFang SC;
	margin-top: -40rpx;
	.center {
		margin-top: 32rpx;
		height: 150rpx;
		width: 100%;
		display: flex;
		.goods_img {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			.img {
				width: 150rpx;
				height: 100%;
			}
		}
		.goods_info_main {
			width: 100%;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.goods_info_number {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
			.goods_info_price {
				font-size: 20rpx;
				font-weight: 400;
				color: #FA2C1E;
				line-height: 28rpx;
			}
		}
	}
	.goods_info_bottom {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		.amount{
			color: #999999;
			line-height: 24rpx;
			margin-right: 24rpx;
		}
		.paid {
			color: #222222;
			line-height: 28rpx;
		}
	}
}
// 其他信息
.other_info {
	.content {
		.cell {
			.remark {
				justify-content: start;
				.label {
					flex: none;
				}
				.value {
					flex: none;
				}
				
			}
			.value {
				.input {
					font-size: 26rpx;
				}
			}
		}
	}
	
}
// 支付信息
.pay_info {
	.card_content {
		.cell {
			.value {
				color: #FA2C1E;
			}
		}
	}
}
.bottom {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: calc(108rpx + env(safe-area-inset-bottom));
	padding: 24rpx 30rpx;
	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	background-color: #fff;
	font-family: PingFangSC-Regular, PingFang SC;
	.btn {
		font-size: 26rpx;
		float: right;
		width: 164rpx;
		height: 60rpx;
		background: linear-gradient(270deg, #FE2E27 0%, #FE877F 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
		color: #FFFFFF;
		margin-left: 20rpx;
	}
	.btn::after{
		content: none;
	}
	.btn_concel {
		border: 2rpx solid #D1D2D5;
		color: #999999;
		background: #fff;
	}
}
</style>
